<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 700px;
            border: 1px solid #000;
            border-collapse: collapse;
            text-align: center
        }

        td,
        th {
            height: 50px;
            border: 1px solid #000;

        }
    </style>
    <script src="./js/jquery1.11.3.js"></script>
    <!-- <script src="./js/utils.js"></script> -->
</head>

<body>
    <label>name<input type="text" class="name"></label>
    <label>age<input type="text" class="age"></label>
    <label>gender</label>
    <select class="sel">
        <option value="male">男</option>
        <option value="female">女</option>
    </select>
    <button class='btn'>提交</button>

    <table class="table" cellspacing="0" cellpadding="0">
        <th>name</th>
        <th>age</th>
        <th>gender</th>
    </table>

    <script>
        $('.btn').click(function () {
            let name = $('.name').val()
            let age = $('.age').val()
            let gender = $('.sel option:selected').val()
            let obj = { name, age, gender }
            $('.table').append(fun(obj))
            $('.name').val('') 
            $('.age').val('') 

        })
        let fun = function ({ name, age, gender }) {
            return `
            <tr>
            <td>${name}</td>
            <td>${age}</td>
            <td>${gender}</td>
        </tr>
            `
        }

        let obj = { name: 'zs', age: 12, gender: 'male' }
        $('.table').append($(fun(obj)))

    </script>
</body>

</html>